
<!--



表格模板


将自己所需要显示的表格页面的路径，填入对应导航栏选项的index值中





-->


<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="static/js/vue.js"></script>
    <script type="text/javascript" src="static/js/index.js"></script>
    <link rel="stylesheet" href="static/css/index.css">
    <title>Document</title>
</head>


<style>
    .el-table .warning-row {
        background: rgb(126, 238, 35);
    }

    .el-table .success-row {
        background: #f0f9eb;
    }

    /*
    包裹表格div的距離外邊距的距離
    width:85% 為寬度
    margin：為左边距
    margin-top為右边距
    */

    #app {
        width: 100%;
    }
</style>

<body>
<div id="appso">
    <el-row class="demo-autocomplete">
        <el-col :span="2">产品类型:</el-col>
        <el-col :span="6">
            <el-autocomplete
                    class="inline-input"
                    v-model="state1"
                    size="small"
                    :fetch-suggestions="querySearch"
                    placeholder="请输入内容"
                    @select="handleSelect">
            </el-autocomplete>
        </el-col>

        <el-col :span="2"> 业务类型:</el-col>
        <el-col :span="6">

            <el-autocomplete
                    class="inline-input"
                    v-model="state2"
                    size="small"
                    :fetch-suggestions="querySearch"
                    placeholder="请输入内容"
                    :trigger-on-focus="true"
                    @select="handleSelect">
            </el-autocomplete>
        </el-col>
        <el-col :span="2">  渠道名称（简称）</el-col>
        <el-col :span="6">

            <el-autocomplete
                    class="inline-input"
                    v-model="state2"
                    size="small"
                    :fetch-suggestions="querySearch"
                    placeholder="请输入内容"
                    :trigger-on-focus="false"
                    @select="handleSelect" >
           </el-autocomplete>
        </el-col>
    </el-row>
    <br>
    <el-row>
        <el-col :span="2">  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;状态:</el-col>
        <el-col :span="6">

            <el-autocomplete
                    class="inline-input"
                    v-model="state2"
                    size="small"
                    :fetch-suggestions="querySearch"
                    placeholder="请输入内容"
                    :trigger-on-focus="false"
                    @select="handleSelect">
            </el-autocomplete>
        </el-col>
        <el-col :span="2"> &nbsp;&nbsp;&nbsp;手机号:</el-col>
        <el-col :span="6">

            <el-autocomplete
                    class="inline-input"
                    v-model="state2"
                    size="small"
                    :fetch-suggestions="querySearch"
                    placeholder="请输入内容"
                    :trigger-on-focus="false"
                    @select="handleSelect">
            </el-autocomplete>
        </el-col>
        <el-col :span="6">
            <el-button type="primary" icon="el-icon-search" size="small" @click="">查询</el-button>
            <el-button type="primary" size="small">导入<i class="el-icon-upload el-icon--right"></i></el-button>
        </el-col>
    </el-row>
</div>


<div id="app">
    <!--table 模板  ：data 绑定了数据 tableData-->
    <template>
        <el-table
                :data="tableData"
                style="width: 100%;height: 700px"
                :row-class-name="tableRowClassName"
                :header-cell-style="{'text-align':'center'}"
                :cell-style="{'text-align':'center'}">
            <el-table-column
                    prop="id"
                    label="id"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="date"
                    label="渠道名称"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="渠道名称（简称）"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="状态"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="联系人"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="联系人手机"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="业务类型"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="创建人 "
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="创建时间 "
                    width="100">
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="230">
                <template slot-scope="scope">
                    <!--handleClick 为点击查看点击事件,括号内的scope.row为当前行的所有参数,要拿什么参数,直接 scope.row参数名-->
                    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                    <el-button type="text" size="small" @click="dialogFormVisible = true">编辑</el-button>
                    <el-button type="text" size="small" @click=del(scope.row.id)>删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--Element分頁插件 有待改进-->
        <el-pagination
                layout="prev, pager, next"
                :total="50">
        </el-pagination>
    </template>
    <el-dialog title="编辑资金方渠道" :visible.sync="dialogFormVisible">
        <el-form :model="form" :inline="true">
            <el-form-item label="渠道名称" :label-width="formLabelWidth">
                <el-input v-model="form.name" style="width: 220px" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="渠道简称" :label-width="formLabelWidth">
                <el-input v-model="form.name" style="width: 220px" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="公司全称" :label-width="formLabelWidth">
                <el-input v-model="form.name" style="width: 220px" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="业务类型" :label-width="formLabelWidth">
                <el-select v-model="form.region" placeholder="请选择贷款类型">
                    <el-option label="车贷" value="shanghai"></el-option>
                    <el-option label="房贷" value="beijing"></el-option>
                    <el-option label="信贷" value="beijing"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="活动名称" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
        </div>
    </el-dialog>
</div>

<div id="paging">

</div>
</body>


<script type="text/javascript" th:inline="javascript">


    new Vue({
        el: "#appso",
        data() {
            return {
                restaurants: [],
                state1: '',
                state2: ''
            };
        },
        methods: {
            querySearch(queryString, cb) {
                var restaurants = this.restaurants;
                var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            createFilter(queryString) {
                return (restaurant) => {
                    return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
                };
            },
            loadAll() {
                return [
                    {"value": "阳阳麻辣烫", "address": "天山西路389号"},
                    {"value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13"}
                ];
            },
            handleSelect(item) {
                console.log(item);
            }
        },
        mounted() {
            this.restaurants = this.loadAll();
        }
    });


    //数据
    let datas = {
        goods: [
            {
                id: 0,
                date: '中国平安',
                name: '王小虎',
                address: '111'
            }, {
                id: 1,
                date: '中国平安',
                name: '王小猪',
                address: '112'
            }, {
                id: 2,
                date: '中国平安',
                name: '王小猫',
                address: '113',
            }, {
                id: 3,
                date: '中国平安',
                name: '王小蛇',
                address: '114'
            }, {
                id: 4,
                date: '中国平安',
                name: '王小蛇',
                address: '114'
            }, {
                id: 5,
                date: '中国平安',
                name: '王小蛇',
                address: '114'
            }, {
                id: 6,
                date: '中国平安',
                name: '王小蛇',
                address: '114'
            }, {
                id: 7,
                date: '中国平安',
                name: '王小蛇',
                address: '114'
            }, {
                id: 8,
                date: '中国平安',
                name: '王小蛇',
                address: '114'
            }, {
                id: 9,
                date: '中国平安',
                name: '王小蛇',
                address: '114'
            }, {
                id: 10,
                date: '中国平安',
                name: '王小蛇',
                address: '114'
            }
        ]
    };


    var demo = new Vue({
        el: "#app", //绑定的div
        data() {
            return {
                tableData: datas.goods,  //  datas数据 中的数组goods
                dialogFormVisible: false,  //这是点击编辑之后，原本隐藏的 编辑框就变为true，就显示编辑框
                form: {      //这个是编辑里面的form表单，一下是表单要修改的内部的字段名
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''  //截至这里编辑框内的内容结束
                },
                formLabelWidth: '120px'
            };
        },
        methods: {
            //为鼠标移动上去的js样式
            tableRowClassName({row, rowIndex}) {
                if (rowIndex % 2 === 1) {
                    return 'success-row';

                } else if (rowIndex % 2 === 2) {
                    return 'warning-row';
                }
                return '';
            },
            //查看的点击事件 line=scope.row,当前行的所有参数
            handleClick(line) {
                alert(line.id);
            },

            // del:function(id){
            //     this.tableData.splice(id,1);
            // },
            //删除，点击删除之后，给后台指令，后台回到前端页面刷新页面。
            del: function (id) {
                alert(id);
                this.tableData.splice(id, 1);
                let that = this
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                    this.$http("删除操作的路径名" + id)//“”+接上删除的id值
                        .then(function (respDate) {
                            if (respDate.data == "success") {
                                that.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                                that.toPage(that.currentPage);
                            } else {
                                that.$message({
                                    type: 'error',
                                    message: '删除失败!'
                                });
                                that.toPage(that.currentPage);
                            }
                        })
                }).catch(() => {
                    this.$message({

                        type: 'info',
                        message: '已取消删除'

                    });
                });
            }//删除方法截止

        }//method方法截止
    });

    //分页还没写


</script>
</html>